<template>
	<view>
			<view class="box">
				<view class="img_box">
					<!-- <img src="../assets/logo.png"> -->
				</view>
				<view class="text_box">
					<input class="inentcy" v-model="username" placeholder="请输入账号"></input>
					<input class="inentcy"  v-model="password" placeholder="请输入密码" show-password>
					</input>
					<view class="disfia">
						<button class="butt" type="primary" @click="getLogin">登录</button>
						<button class="butt" @click="cong">重置</button>
					</view>
				</view>
			</view>
		</view>
</template>

<script>
import { login } from "../../service/api.js";
export default {
  data() {
    return {
      username: "test1",
      password: "123456",
    };
  },
  methods: {
    //登录
    async getLogin() {
      if (this.username == "" || this.password == "") {
        uni.showToast({
          title: "请填写账号或密码",
          icon: "none",
          position: "",
        });
      }
      let loginRes = await login({
        username: this.username,
        password: this.password,
      });
      const { UserKey } = loginRes.data;
      uni.setStorageSync("userKey", UserKey);
      uni.navigateTo({
        url: "/pages/index/index",
      });
    },

    cong() {
      (this.username = ""), (this.password = "");
    },
  },
};
</script>

<style>
.box {
  width: 100vw;
  height: 100vh;
  /* background: #55ff7f; */
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
}
.inentcy {
  border: 1px solid #333333;
  border-radius: 20px;
  height: 30px;
  margin: 15px;
}
.img_box {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  border: 10px white solid;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
  left: 0px;
  top: 78px;
  background: #e5e5e5;
  box-shadow: 0 0 20px white;
}

.img_box > img {
  width: 100%;
  height: 100%;
}

.text_box {
  width: 500px;
  height: 200px;
  margin: 10px auto;
  padding-top: 100px;
  padding-right: 10px;
  padding-left: 10px;
  border-radius: 5px;
  background-color: aliceblue;
}
.disfia {
  display: flex;
}
.butt {
  width: 150px;
}
</style>
